<div class="usermanage">
  <div class="select">
    <section class="demo-section">
      <div>
        <form dForm ngForm [layout]="layoutDirection" [labelSize]="'sm'" class="form">
          <d-form-item>
            <d-search [isKeyupSearch]="true" name="userName" placeholder="请输入用户名" [(ngModel)]="pager.username"
              [iconPosition]="'left'" (searchFn)="submitForm($event)"></d-search>
          </d-form-item>
          <d-form-item>
            <d-form-label>状态:</d-form-label>
            <d-form-control>
              <d-select name="options2" [allowClear]="true" [filterKey]="'name'" [options]="options2"
                [(ngModel)]="currentOption4" [placeholder]="'请选择'" (valueChange)="submitForm($event)"></d-select>
            </d-form-control>
          </d-form-item>
        </form>
      </div>
    </section>
  </div>
  <d-data-table class="table" [dataSource]="basicDataSource" [scrollable]="true" [striped]="true"
    [rowHoveredHighlight]='false'>
    <thead dTableHead>
      <tr dTableRow>
        <th dHeadCell *ngFor="let colOption of dataTableOptions.columns">
          {{ colOption.header }}
        </th>
      </tr>
    </thead>
    <tbody dTableBody>
      <ng-template let-rowItem="rowItem" let-rowIndex="rowIndex">
        <tr dTableRow>
          <td dTableCell>{{ rowItem['userName'] }}</td>
          <td dTableCell>{{ rowItem['id'] }}</td>
          <td dTableCell>
            {{ rowItem['role'] == 'admin' ? '管理员' : '用户' }}
          </td>
          <td dTableCell>
            <span>{{
              rowItem['authenticated'] == false ? '未认证' : '已认证'
              }}</span>
          </td>
          <td dTableCell>
            <span>{{ rowItem['locked'] == true ? '锁定' : '正常' }}</span>
          </td>
          <td dTableCell>
            <a *ngIf="rowItem['role'] != 'admin'" style="cursor: pointer;"
              (click)="deleteUser(rowItem['id'], rowItem['userName'])">删除</a><span
              *ngIf="rowItem['role'] != 'admin'">&emsp;|</span>
            <a *ngIf="rowItem['role'] != 'admin'" style="cursor: pointer;" (click)="
                lockUser(rowItem['id'], rowItem['locked'], rowItem['userName'])
              ">&emsp;{{ rowItem['locked'] == true ? '解锁' : '锁定' }}</a>
          </td>
        </tr>
      </ng-template>
    </tbody>
    <ng-template #noResultTemplateRef>
      <div style="text-align: center; margin-top: 20px">No Data</div>
    </ng-template>
  </d-data-table>
  <div class="bottom">
    <d-pagination style="position: absolute; right: 0; top: 20px" [size]="'sm'" [total]="totalNum"
      [(pageSize)]="pager.pagesize" [(pageIndex)]="pager.pagenum" [maxItems]="10" [canViewTotal]="true"
      [canJumpPage]="true" [canChangePageSize]="true" [autoFixPageIndex]="false"
      (pageIndexChange)="pageIndexChange($event)" (pageSizeChange)="pageSizeChange($event)"></d-pagination>
  </div>
</div>
